<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Graph Results</title>
    <link rel="icon" href="../favicon.ico"/>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../node_modules/vis/dist/vis-network.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        .ppt-div-graph {
            height: 50%;
        }

        .frame {
            height: 550px;
            /*background-color: #F8F9FB;*/
            position: relative;
            top: 0;
            opacity: 1;
            max-height: 10000px;
            border-bottom: 1px solid #e6e9ef;
        }
    </style>
</head>
<body class="ppt-body">

<section class="ppt-section-main" style="height: 700px">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Neo4j movie graph -</span> Graph Results example
    </div>

    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph is generated here-->
    </div>

    <div id="vis" class="ppt-div-graph" style="margin-top: 20px">
        <!-- Results visualization will be generated here -->
    </div>

    <div id="popoto-cypher" class="ppt-container-query">
        <!-- Query viewer is generated here -->
    </div>

    <!-- Add a header with total number of results count -->
    <div class="ppt-section-header">
        RESULTS <span id="rescount" class="ppt-count"></span>
    </div>

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results are generated here -->
    </div>

</section>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.js" charset="utf-8"></script>
<script src="../node_modules/vis/dist/vis-network.min.js" charset="utf-8"></script>
<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    // Define the list of label provider to customize the graph behavior:
    // Only two labels are used in Neo4j movie graph example: "Movie" and "Person"
    popoto.provider.node.Provider = {
        "Movie": {
            "returnAttributes": ["title", "released", "tagline"],
            "constraintAttribute": "title"
        },
        "Person": {
            "returnAttributes": ["name", "born"],
            "constraintAttribute": "name",
            // Customize result display for Person nodes:
            "displayResults": function (pResultElmt) {

                // Here D3.js mechanisms is used to generate HTML code.
                // By default Popoto.js generates a <p> element for each result.
                // pResultElmt parameter is the <p> element selected with D3.js
                // So for "Person" result nodes two elements are generated:

                // An <h3> element containing the person name
                pResultElmt.append("h3")
                    .text(function (result) {
                        return result.attributes.name;
                    });

                // A <span> element with the computed age from born attribute
                pResultElmt.filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.born;
                }).append("span").text(function (result) {
                    return "Age: " + (new Date().getFullYear() - result.attributes.born);
                });

            }
        }
    };

    // Change the number of displayed results:
    popoto.query.RESULTS_PAGE_SIZE = 25;

    popoto.logger.LEVEL = popoto.logger.LogLevels.INFO;

    /**
     * Add a listener on result received to update map.
     */
    // popoto.result.onGraphResultReceived(
    //     function (graphResultObject) {
    //
    //         var nodes = convertNodes(graphResultObject.nodes);
    //         var edges = convertEdges(graphResultObject.edges);
    //         var container = document.getElementById('vis');
    //
    //         // provide the data in the vis format
    //         var data = {
    //             nodes: nodes,
    //             edges: edges
    //         };
    //         var options = {
    //             nodes: {
    //                 shape: 'circle',
    //                 borderWidth: 2,
    //                 size: 20,
    //                 font: {
    //                     size: 10,
    //                     color: '#ffffff'
    //                 }
    //             },
    //             edges: {
    //                 length: 200,
    //                 font: {
    //                     align: 'top',
    //                     color: '#ffffff',
    //                     strokeWidth: 0,
    //                     size: 10
    //                 },
    //                 arrows: 'to'
    //             },
    //             groups: {
    //                 "Person": {
    //                     color: {background: '#68BDF6', border: '#5CA8DB'}
    //                 },
    //                 "Movie": {
    //                     color: {background: '#FF756E', border: '#E06760'}
    //                 }
    //             }
    //         };
    //
    //         // initialize the network
    //         var network = new vis.Network(container, data, options);
    //     }
    // );

    function convertNodes(nodes) {
        var convertedNodes = [];

        nodes.forEach(function (node) {
            var nodeLabel = node.labels[0];
            convertedNodes.push({
                id: node.id,
                label: (nodeLabel === "Person" ? node.properties["name"] : node.properties["title"]),
                group: nodeLabel
            })
        });

        return convertedNodes;
    }

    function convertEdges(edges) {
        var convertedEdges = [];

        edges.forEach(function (edge) {
            convertedEdges.push({
                from: edge.startNode,
                to: edge.endNode,
                label: edge.type
            })
        });

        return convertedEdges;
    }

    driver.verifyConnectivity().then(function () {
        throw new Error("Graph result is not supported since 3.0.0");
        // Start the generation using parameter as root label of the query.
        popoto.start({
                label: "Person",
                rel: [
                    {
                        label: "ACTED_IN",
                        target: {
                            label: "Movie",
                            value: [
                                {
                                    title: "The Matrix"
                                },
                                {
                                    title: "Johnny Mnemonic"
                                },
                            ]
                        }
                    }
                ]
            }
        );
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })

</script>
</body>
</html>
